<template>
    <fieldset>
        <legend>子组件</legend>
        <h2>子组件</h2>
        <h1>{{ gift }}</h1>
        <h1>余额：{{balance}}</h1>
        <button @click="bet">点击下注</button>
    </fieldset>
</template>
<script setup>
//使用defineProps来声明props属性
import { defineProps, toRefs, ref , defineEmits,defineExpose} from "vue"

let props = defineProps({
    gift: {
        type: String
    }
})

//解构props中的属性，会消除他的响应性
//使用toRefs让属性重新获得响应性
let { gift } = toRefs(props)

console.log(props);

//子传父的过程

let balance = ref(1000000)

//使用defineEmits来声明自定义事件
let emit = defineEmits(['betMoney'])
console.log(emit);
let bet = function () {
    balance.value = balance.value - 10000
    emit('betMoney',10000)
}

//defineExpose把子组件的方法和属性暴露给父组件
//defineExpose一般暴露方法给父组件，一些静态属性父组件

defineExpose({
    balance,
    bet
})

</script>